import React, { useEffect, useRef, useState } from 'react';
import { Switch, Modal, Button, Form, Popconfirm, message, Tag } from 'antd';
import { connect, useRequest } from "umi";
import AutoTable from '@/components/AutoTable';
import InitForm from '@/components/InitForm';
import { postFetch } from '@/utils/doFetch';
import { stopsettle, companydetail, company } from '@/services/business';
import { PlusOutlined } from '@ant-design/icons';
import moment from 'moment';

let Dossiersave = (props) => {
    const { global, dispatch } = props,
        defaultFields = {
            "address": {
                "value": null,
                "type": "input",
                "title": "存放地址",
                "name": [
                    "address"
                ],
                "required": true,
                col: { span: 24 }
            },
            "rules": {
                "value": [],
                "type": "table",
                "title": "编号规则",
                "name": [
                    "rules"
                ],
                "required": true,
                "columns": [
                    {
                        "title": "编号代号",
                        "dataIndex": "rule_code",
                        "key": "rule_code",
                        "search": false,
                        "formItemProps": {
                            rules: [
                                {
                                    required: true,
                                    message: '此项是必填项',
                                }
                            ],
                        },
                    },
                    {
                        "title": "编号范围-最小值",
                        "dataIndex": "rule_code_min",
                        "key": "rule_code_min",
                        "valueType": "digit",
                        "search": false,
                        "width": 140,
                        "formItemProps": {
                            rules: [
                                {
                                    required: true,
                                    message: '此项是必填项',
                                }
                            ],
                        },
                    },
                    {
                        "title": "编号范围-最大值",
                        "dataIndex": "rule_code_max",
                        "key": "rule_code_max",
                        "valueType": "digit",
                        "search": false,
                        "width": 140,
                        "formItemProps": {
                            rules: [
                                {
                                    required: true,
                                    message: '此项是必填项',
                                }
                            ],
                        },
                    },
                    {
                        title: '操作',
                        valueType: 'option',
                        width: 60,
                        render: () => {
                            return null;
                        }
                    }
                ],
                "rowKey": "id",
                col: { span: 24 }
            },
        };
    let actionRef = useRef(), ChildRef = null;
    const [vs, cvs] = useState(false),//表单显/隐
        [fields, cf] = useState(defaultFields),
        [iftype, ciftype] = useState({}),
        [formRef] = Form.useForm();


    function reload() {
        actionRef?.current?.reload();
        ChildRef?.onRefresh();
    }
    const columns = [
        {
            "title": "存放地址",
            "dataIndex": "address",
            "key": "address",
            "search": false
        },
        {
            "title": "编号规则",
            "dataIndex": "rules",
            "key": "rules",
            "search": false,
            "render": (text, record) => {
                return <div>
                    {
                        Array.isArray(record.rules) ?
                            record.rules.map((it, i) => <Tag key={i} style={{ float: "left" }}>{it.rule_code}:  {it.rule_code_min}-{it.rule_code_max}</Tag>) : "-"
                    }

                </div>
            }
        },
        {
            "title": "操作",
            "valueType": "option",
            "width": 180,
            "render": (text, row, _, action) => extraAction(text, row, _, action)
        }
    ];

    function extraAction(text, record, _, action) {
        return [
            <a onClick={() => {
                ciftype({
                    val: "edit",
                    id: record.id,
                    title: "修改凭证存放"
                })
                cf(() => {
                    for (let i in defaultFields) {
                        defaultFields[i].value = record[i];
                        if (i.indexOf("password") != -1) {
                            defaultFields[i].hides = true;
                        }
                    }
                    return { ...defaultFields }
                });
                cvs(true);
            }}>
                修改
            </a>,
            <Popconfirm
                title="确认删除该凭证存放？"
                onConfirm={() => {
                    dispatch({
                        type: 'dossier/deletevoucher_storage',
                        payload: record.id
                    }).then(res => {
                        if (res.code == 0) {
                            message.success("操作成功");
                            reload();
                            cvs(false)
                        }
                    })
                }}
            >
                <a style={{ color: "red" }}>删除</a>
            </Popconfirm>
        ]
    }

    let saveData = (values, fn) => {
        let { dispatch } = props;
        if (iftype.val == "add") {
            dispatch({
                type: 'dossier/addvoucher_storage',
                payload: { ...values }
            }).then(res => {
                if (res.code == 0) {
                    message.success("操作成功");
                    reload();
                    cvs(false)
                }
            })
        } else if (iftype.val == "edit") {
            dispatch({
                type: 'dossier/editvoucher_storage',
                payload: { ...values, id: iftype.id }
            }).then(res => {
                if (res.code == 0) {
                    message.success("操作成功");
                    reload();
                    cvs(false)
                }
            })
        }




    }

    let extra = (
        <div className='action' title='新增' onClick={() => {
            cvs(true);
            cf(fields => {
                for (let i in defaultFields) {
                    defaultFields[i].value = defaultFields[i].type == "inputnumber" ? 0 : null;
                    defaultFields[i].hides = false;
                }
                return { ...defaultFields }
            });
            ciftype({
                val: "add",
                title: "新增凭证存放"
            })
        }}>
            <PlusOutlined />
        </div>)

    return (
        <div className="nopa autotable">
            <AutoTable
                pagetitle={props.route.name}
                pageextra={extra}
                columns={columns}
                actionRef={actionRef}
                onRef={node => ChildRef = node}
                path="/wbn-api/voucher_storage"
            ></AutoTable>


            <Modal
                maskClosable={false}
                title={iftype.title}
                open={vs}
                onCancel={() => cvs(false)}
                footer={false}
                destroyOnClose={true}
                width={850}
            >
                <InitForm
                    formRef={formRef}
                    fields={fields}
                    submitData={(values, fn) => {
                        saveData(values, fn)
                    }}
                    onChange={(changedValues, allValues) => {
                    }}
                    submitting={
                        props.loading.effects['dossier/addvoucher_storage'] || props.loading.effects['dossier/editvoucher_storage'] || !vs
                    }
                >
                </InitForm>
            </Modal>
        </div>
    )
}

export default connect(({ global, loading }) => ({
    global,
    loading,
}))(Dossiersave)